<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="主机名">
        <el-col :span="8">
          <el-input v-model="form.name" placeholder="请输入hostname"/>
        </el-col>
      </el-form-item>
      <el-form-item label="监控代理">
        <el-col :span="8">
          <el-input v-model="form.client" placeholder="请输入ip:port"/>
        </el-col>
      </el-form-item>
      <el-form-item label="SSH">
        <el-col :span="8">
          <el-input v-model="form.ssh" placeholder="请输入ip:port"/>
        </el-col>
      </el-form-item>
      <el-form-item label="SNMP">
        <el-col :span="8">
          <el-input v-model="form.snmp" placeholder="请输入ip:port"/>
        </el-col>
      </el-form-item>
      <el-form-item label="JMX">
        <el-col :span="8">
          <el-row v-for="(jmx_interface) in form.jmx_interfaces" :key="jmx_interface.key" >
            <el-col :span="16">
              <el-row>
                <el-input v-model="jmx_interface.addr" placeholder="请输入ip:port" />
              </el-row>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-row>
                <el-link type="primary" @click="removeJmxInterface(jmx_interface)">移除</el-link>
              </el-row>
            </el-col>
          </el-row>
          <el-link type="primary" @click="addJmxInterface">添加</el-link>
        </el-col>
      </el-form-item>
      <el-form-item label="服务器组">
        <el-col :span="14">
          <el-select
            v-model="serverGroupSelectModel"
            multiple
            placeholder="请选择服务器组（可选0个或多个）"
            style="width: 80%"
          >
            <el-option
              v-for="item in form.serverGroups"
              :key="item.id"
              :label="item.name"
              :aria-selected="true"
              :value="item.id"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="模板">
        <el-col :span="14">
          <el-select
            v-model="templateSelectModel"
            multiple
            placeholder="请选择模板（可选0个或多个）"
            style="width: 80%"
          >
            <el-option
              v-for="item in form.templates"
              :key="item.id"
              :label="item.name"
              :aria-selected="true"
              :value="item.id"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="数据收集器">
        <el-col :span="14">
          <el-select
            v-model="dataCollectorSelectModel"
            placeholder="请选择数据收集器"
            style="width: 40%"
          >
            <el-option
              v-for="item in form.dataCollectors"
              :key="item.id"
              :label="item.name"
              :aria-selected="true"
              :value="item.id"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="所在机房">
        <el-col :span="14">
          <el-select
            v-model="idcSelectModel"
            placeholder="请输入或选择机房（可选）"
            style="width: 40%"
            filterable
            allow-create
          >
            <el-option
              v-for="item in form.idcs"
              :key="item.id"
              :label="item.name"
              :aria-selected="true"
              :value="item.name"
            />
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="自动收集资产">
        <el-switch
          v-model="form.auto_asset"
        />
      </el-form-item>
      <el-form-item label="是否监控">
        <el-switch
          v-model="form.monitoring"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="
            changeServer(form.name, form.client, form.ssh, form.snmp, dataCollectorSelectModel, idcSelectModel,
                         serverGroupSelectModel, templateSelectModel, form.auto_asset, form.monitoring, form.jmx_interfaces)
          "
        >更新
        </el-button
        >
        <el-button @click="jumpServerList">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { change_server, read_server, server_group_list } from '../../api/server'
import { template_list } from '../../api/template'
import { idc_list } from '../../api/idc'
import { data_collector_list } from '../../api/data_collector'

export default {
  data() {
    return {
      form: {
        name: '',
        client: '',
        ssh: '',
        jmx_interfaces: [{ addr: '' }],
        snmp: '',
        idc: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        templates: [],
        serverGroups: [],
        dataCollectors: [],
        idcs: [],
        auto_asset: true,
        monitoring: null
      },
      serverGroupSelectModel: null,
      templateSelectModel: null,
      dataCollectorSelectModel: null,
      idcSelectModel: null
    }
  },
  created() {
    this.fetchServerGroupListData()
    this.fetchTemplateListData()
    this.fetchIdcListData()
    this.fetchDataCollectorListData()
    this.fetchData(this.$route.query.id)
  },
  methods: {
    fetchData(id) {
      read_server({ id: id }).then(response => {
        this.form.name = response.data.item.name
        this.form.client = response.data.item.agent_address
        this.form.ssh = response.data.item.ssh_address
        this.form.snmp = response.data.item.snmp_address
        this.form.jmx = response.data.item.jmx_address
        if (response.data.item.interfaces.length > 0) {
          this.form.jmx_interfaces = []
          for (const idx in response.data.item.interfaces) {
            if (response.data.item.interfaces[idx]['type'] === 4) {
              this.form.jmx_interfaces.push({ addr: response.data.item.interfaces[idx]['address'] })
            }
          }
        }

        // 所属的服务器组
        const serverGroupIds = response.data.item.server_groups
        const a = []
        serverGroupIds.forEach(function(e) {
          a.push(e)
        })
        this.serverGroupSelectModel = a
        // 数据收集器
        this.dataCollectorSelectModel = response.data.item.data_collector
        // 机房
        if (response.data.item.asset != null) {
          this.idcSelectModel = response.data.item.asset.idc.name
        }
        // 是否监控
        this.form.monitoring = response.data.item.status !== 2
      })
    },
    // 获取所有模板列表
    fetchTemplateListData() {
      template_list().then(response => {
        this.form.templates = response.data.items
      })
    },
    fetchServerGroupListData() {
      server_group_list({ page: 1, size: 99999, order: 'asc' }).then(response => {
        this.form.serverGroups = response.data.items
      })
    },
    fetchDataCollectorListData() {
      data_collector_list().then(response => {
        this.form.dataCollectors = response.data.items
      })
    },
    fetchIdcListData() {
      idc_list().then(response => {
        this.form.idcs = response.data.items
      })
    },
    changeServer(a, b, c, d, e, f, g, h, i, j, k) {
      change_server(this.$route.query.id, a, b, c, d, e, f, g, h, i, j, k).then(response => {
      }).catch(e => {
        console.log(e)
      })
    },
    jumpServerList() {
      this.$router.push({ path: '/server_list' })
    },
    removeJmxInterface(item) {
      var index = this.form.jmx_interfaces.indexOf(item)
      if (index !== -1) {
        this.form.jmx_interfaces.splice(index, 1)
      }
    },
    addJmxInterface() {
      this.form.jmx_interfaces.push({
        addr: ''
      })
    }
  }
}
</script>

<style scoped>
  .app-container /deep/ .el-form-item {
    margin-bottom: 8px;
  }
</style>
